<template>
  <view class="mine-page">
    <!-- 个人中心 -->
    <view class="custom-navbar navbar-fixed">
      <view class="navbar-container">
        <view class="navbar-title">个人中心</view>
        <view v-if="isLoggedIn" class="logout-btn" @click="onLogoutClick">
          <u-icon name="close" color="#fff" size="44"></u-icon>
        </view>
      </view>
    </view>
    <!-- 主要内容 -->
    <view class="main-content">
      <!-- 登录状态显示的区域 -->
      <view v-if="isLoggedIn" class="user-info-card">
        <image :src="avatar" class="avatar" />
        <view class="user-info-main">
          <view class="nickname">{{ name }}</view>
          <view class="level-sex">
            <text class="level">Lv.{{ userInfo.level || 1 }}</text>
            <u-icon
              :name="userInfo.gender === '男' ? 'man' : 'woman'"
              size="40"
              :color="userInfo.gender === '男' ? '#2193b0' : '#ff69b4'"
            />
            <text class="profile-link">个人主页</text>
          </view>
        </view>
        <view class="user-stats">
          <view class="stat"><text class="num">114</text>关注</view>
          <view class="stat"><text class="num">114</text>粉丝</view>
          <view class="stat"><text class="num">11.4万</text>获赞</view>
        </view>
      </view>
      <!-- 未登录显示的区域 -->
      <view v-else class="unlogin-block section-card">
        <view class="welcome-text">欢迎使用小默旅行，体验更多功能</view>
        <button class="login-btn" @click="goToLogin">登录/注册</button>
      </view>
      <!-- 登陆后所显示的装饰区域 -->
      <view v-if="isLoggedIn" class="section-card asset-section">
        <view class="asset-row">
          <view class="asset-item"
            >优惠券：<text class="asset-num">3 </text>张</view
          >
          <view class="asset-item"
            >金币：<text class="asset-num">666</text>个</view
          >
        </view>
      </view>
      <!-- 我的门票区域 -->
      <view class="section-card nav-section">
        <view class="section-title">我的门票</view>
        <view class="nav-grid">
          <view class="nav-item" v-for="item in ticketList" :key="item.text">
            <view class="icon-circle" :style="{ background: item.bg }">
              <u-icon :name="item.icon" color="#fff" size="28" />
            </view>
            <text class="nav-label">{{ item.text }}</text>
          </view>
        </view>
      </view>
      <!-- 基础服务区域 -->
      <view class="section-card nav-section">
        <view class="section-title" 			>基础服务</view>
        <view class="nav-grid">
          <view
            class="nav-item"
            v-for="item in serviceList"
            :key="item.text"
            @click="goToTicketList(item)"

          >
            <view class="icon-circle" :style="{ background: item.bg }">
              <u-icon :name="item.icon" color="#fff" size="28" />
              <view v-if="item.badge" class="nav-badge">{{ item.badge }}</view>
            </view>
            <text class="nav-label">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { updateData } from "../../api/system/dict/data";
import { logout } from "@/api/login";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["avatar", "name"]),
  },

  data() {
    return {
      isLoggedIn: uni.getStorageSync("isLoggedIn") || false,
      userInfo: {},
      ticketList: [
        {
          icon: "order",
          text: "全部门票",
          bg: "linear-gradient(135deg,#3b7cff,#6dd5ed)",
        },
        {
          icon: "付",
          text: "待付款",
          bg: "linear-gradient(135deg,#ff9900,#ffe082)",
        },
        {
          icon: "clock",
          text: "未使用",
          bg: "linear-gradient(135deg,#00bcd4,#b2fefa)",
        },
        {
          icon: "chat",
          text: "待评价",
          bg: "linear-gradient(135deg,#00c292,#b2fefa)",
        },
      ],
      serviceList: [
        {
          icon: "send",
          text: "我要发布",
          bg: "linear-gradient(135deg,#3b7cff,#6dd5ed)",
        },
        {
          icon: "file-text",
          text: "酒店订单",
          bg: "linear-gradient(135deg,#333,#bdbdbd)",
        },
        {
          icon: "ticket",
          text: "我的机票",
          bg: "linear-gradient(135deg,#ffb300,#ffe082)",
          badge: "NEW",
        },
        {
          icon: "car",
          text: "我的车票",
          bg: "linear-gradient(135deg,#ffb300,#ffe082)",
          badge: "HOT",
        },
        {
          icon: "vip",
          text: "我的金币",
          bg: "linear-gradient(135deg,#3b7cff,#6dd5ed)",
        },
        {
          icon: "star",
          text: "我的收藏",
          bg: "linear-gradient(135deg,#ff9900,#ffe082)",
        },
        {
          icon: "headphones",
          text: "联系客服",
          bg: "linear-gradient(135deg,#00bcd4,#b2fefa)",
        },
        {
          icon: "chat",
          text: "意见反馈",
          bg: "linear-gradient(135deg,#00c292,#b2fefa)",
        },
      ],
    };
  },
  onShow() {
    // 页面显示时，可以检查是否需要刷新用户信息
    // 例如，如果用户信息为空，或者需要确保是最新的
    if (!this.userId) {
      this.$store.dispatch("GetInfo").catch((error) => {
        console.error("获取用户信息失败:", error);
      });
    }
  },
  methods: {
	  updateData() {
		  console.log("执行了")
	        uni.$emit('refreshList', { id: 123, status: 'updated' });
	      },
    getUserInfo() {
      userInfo().then((res) => {
        this.userInfo = res;
      });
    },
    goToTicketList(item) {
      if (item.text === "酒店订单") {
        uni.navigateTo({
          url: "/pages/order/orders",
        })
        return;
      } else if (item.text === "意见反馈") {
        uni.navigateTo({
          url: "/pages/view-spot/test",
        });
		setTimeout(() => {
		      this.updateData(); // 延迟触发事件，确保 test.vue 已加载
		    }, 500); // 500ms 延迟，可根据需要调整
        return;
      }
    },
    goToLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    onLogoutClick() {
      uni.showModal({
        title: "退出登录",
        content: "确定要退出登录吗？",
        confirmText: "退出",
        cancelText: "取消",
        success: (res) => {
          if (res.confirm) {
            logout().finally(() => {
              uni.clearStorageSync();
              this.isLoggedIn = false;
              this.userInfo = {
                avatar: "/static/avatar.png",
                nickname: "小智",
                level: 1,
                gender: "男",
                follow: 0,
                fans: 0,
                likes: "0",
                couponCount: 0,
                coin: 0,
              };
              uni.showToast({
                title: "已退出",
                icon: "none",
              });
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
:root {
  --primary-color: #007aff;
}

.mine-page {
  min-height: 100vh;
  background: #f8f9fb;
  position: relative;
  overflow-x: hidden;
  /* 使用 flex 布局让内容垂直和水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.custom-navbar.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  background: linear-gradient(90deg, #4f8cff 0%, #007aff 100%);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  padding: 35rpx 0; /* 增大导航栏高度 */
  height: 120rpx; /* 固定导航栏总高度 */
}

.main-content {
  position: relative;
  z-index: 2;
  margin-top: 120rpx; /* 为导航栏留出空间 */
  width: 90%; /* 设置内容宽度 */
  max-width: 1200rpx; /* 限制最大宽度 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 让子元素水平居中 */
  padding-bottom: 60rpx;
}

.section-card {
  width: 100%; /* 卡片宽度填满父容器 */
  margin-bottom: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.navbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2rpx;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 30rpx;
}

.main-content {
  position: relative;
  z-index: 2;
  margin-top: 120rpx;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 60rpx;
}

.user-info-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 122, 255, 0.08);
  margin: 0 0 32rpx 0;
  padding: 32rpx 0 16rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 12rpx;
  border: 4rpx solid #4f8cff;
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.1);
}

.nickname {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 8rpx;
}

.level-sex {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 24rpx;
  color: #888;
}

.profile-link {
  color: var(--primary-color);
  font-size: 24rpx;
  margin-left: 12rpx;
  text-decoration: underline;
}

.user-stats {
  display: flex;
  gap: 32rpx;
  margin-top: 12rpx;
}

.stat {
  font-size: 24rpx;
  color: #888;
}

.stat .num {
  color: var(--primary-color);
  font-weight: bold;
  margin-right: 4rpx;
}

.unlogin-block {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 122, 255, 0.08);
  margin: 0 0 32rpx 0;
  padding: 32rpx 0 16rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-text {
  font-size: 28rpx;
  color: #222;
  margin-bottom: 16rpx;
}

.login-btn {
  background: linear-gradient(90deg, #4f8cff 0%, #007aff 100%);
  color: #fff;
  border-radius: 32rpx;
  font-size: 28rpx;
  font-weight: bold;
  padding: 16rpx 64rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.1);
}

.section-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 122, 255, 0.08);
  margin: 0 0 32rpx 0;
  padding: 32rpx 0 16rpx 0;
}

.asset-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.asset-row {
  display: flex;
  gap: 48rpx;
  font-size: 26rpx;
  color: #888;
}

.asset-num {
  color: var(--primary-color);
  font-weight: bold;
  margin: 0 4rpx;
}

.nav-section {
  margin-top: 0;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 16rpx;
  margin-left: 32rpx;
}

.nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx 0;
  justify-content: flex-start;
}

.nav-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12rpx;
}

.icon-circle {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #eaf6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  position: relative;
}

.nav-label {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--primary-color);
}

.nav-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #ff4d4f;
  color: #fff;
  font-size: 18rpx;
  border-radius: 12rpx;
  padding: 2rpx 8rpx;
}
</style>